<template>
  <div>
    <h3 @click="dialogVisible = true">点击弹出</h3>
    <MyDialog
      :width="'40%'"
      :visible="dialogVisible"
      @closeMask="dialogVisible = false"
      @closeDialog="handleClose"
    >
      <span slot="header">标题</span>
      <span slot="body">内容</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from "@/components/dialog.vue";
export default {
  components: { MyDialog },
  data() {
    return {
      //弹框默认是否显示
      dialogVisible: false,
    };
  },
  mounted() {},
  methods: {
    //关闭时回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          console.log("回调执行", done);
          this.dialogVisible = done;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped >
</style>
